<template>
  <div>
    <el-select v-model="chapterId" placeholder="请选择">
    <el-option
      v-for="(item,index) in chapterList"
      :key="index"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane v-for="(item,index) in modelList" :key="index" :label="item.name" :name="String(item.id)">
        {{ item.name }} <span :class="{'red':maxCount == nowCount}">{{ nowCount }}/{{ maxCount }}</span>
        <el-table
          :ref="String(item.id)"
          :data="item.list"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          @select="tableSelect">
          <el-table-column
            type="selection"
            width="55"
            :selectable="selectTable">
          </el-table-column>
          <el-table-column
            prop="id"
            label="id">
          </el-table-column>
          <el-table-column
            prop="price"
            label="价格"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="num"
            label="数量"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      activeName: "1",
      maxCount:2,
      nowCount:0,
      chapterId: "",
      //章节列表
      chapterList: [
        {
          id: 1,
          name: "第一章"
        },
        {
          id: 2,
          name: "第二章"
        },
        {
          id: 3,
          name: "第三章"
        }
      ],
      modelList: [
        {
          name: "选择题",
          type: 1,
          id: 1,
          maxCount:2,
          nowCount:0,
          list: [
            {
              id: 1,
              type: 1,
              price: 5,
              num: 6
            },
            {
              id: 2,
              type: 1,
              price: 55,
              num: 146
            },
            {
              id: 3,
              type: 1,
              price: 51,
              num: 63
            }
          ]
        },
        {
          name: "判断题",
          maxCount:1,
          nowCount:0,
          type: 2,
          id: 2,
          list: [
            {
              id: 4,
              type: 2,
              price: 51,
              num: 63
            },
            {
              id: 5,
              type: 2,
              price: 51,
              num: 63
            },
            {
              id: 6,
              type: 2,
              price: 51,
              num: 63
            }
          ]
        },
        {
          name: "填空题",
          maxCount:4,
          nowCount:0,
          type: 3,
          id: 3,
          list: [
            {
              id: 7,
              type: 3,
              price: 51,
              num: 62
            },
            {
              id: 8,
              type: 3,
              price: 153,
              num: 164
            },
            {
              id: 9,
              type: 3,
              price: 153,
              num: 164
            },
            {
              id: 10,
              type: 3,
              price: 153,
              num: 164
            },
            {
              id: 11,
              type: 3,
              price: 153,
              num: 164
            },
            {
              id: 12,
              type: 3,
              price: 153,
              num: 164
            }
          ]
        }
      ]
    };
  },

  mounted() {
    this.init();
  },
  methods: {
    init() {},
    gaibian() {
      let that = this;
      let modelList = [
        {
          name: "张三",
          id: 1,
          list: [
            {
              price: 5,
              num: 6
            }
          ]
        },
        {
          name: "李四",
          id: 2,
          list: [
            {
              price: 25,
              num: 16
            }
          ]
        },
        {
          name: "王五",
          id: 3,
          list: [
            {
              price: 51,
              num: 62
            },
            {
              price: 153,
              num: 164
            }
          ]
        }
      ];
      that.modelList = modelList;
      $.each(modelList, function(i, d) {
        that.$refs["table" + String(i)].toggleRowSelection();
      });
      console.log(modelList);
    },
    //选项卡切换
    tabClick(){
      let that = this;
      let modelList = that.modelList;
      let activeName = that.activeName;
      //查找题型对象
      let questionTypeObj = modelList.find(item=>item.type == activeName );
      //赋值最大选项和现在选项个数
      that.maxCount = questionTypeObj.maxCount;
      that.nowCount = questionTypeObj.nowCount;
      console.log(that.maxCount,123);
      console.log(that.nowCount,123);
    },
    //禁用
    selectTable(row, index) {
      let that = this;
      let activeName = that.activeName;
      let maxCount = that.maxCount;
      let nowCount = that.nowCount;
      if(maxCount == nowCount){
        return row.isChecked;
      }
      else{
        return 1;
      }
    },
    //单选
    tableSelect(rows,row){
      let that = this;
      let modelList = that.modelList;
      let activeName = that.activeName;
      //查找题型对象
      let questionTypeObj = modelList.find(item=>item.type == activeName );
      row.isChecked = !row.isChecked;
      questionTypeObj.nowCount = rows.length;
      that.nowCount = rows.length;
    },
    handleSelectionChange(val) {
      let that = this;
    }
  }
};
</script>
<style>
.red{
  color:red;
}
thead .el-checkbox{
  display: none;
}
</style>
